<template>
    <div class="tabbar">
        <van-tabbar v-model="active" route active-color="#45FDFE" inactive-color="#99A8CA">
            <van-tabbar-item replace to="/">
                <span>{{$t('m.home') }}</span>
                <template #icon="props">
                    <img :src="props.active ? icon1.active : icon1.inactive" />
                </template>
            </van-tabbar-item>
            <van-tabbar-item replace to="/wk">
                <span>{{$t('m.mining')}}</span>
                <template #icon="props">
                    <img :src="props.active ? icon2.active : icon2.inactive" />
                </template>
            </van-tabbar-item>
            <van-tabbar-item replace to="/jl">
                <span>{{$t('m.reward')}}</span>
                <template #icon="props">
                    <img :src="props.active ? icon3.active : icon3.inactive" />
                </template>
            </van-tabbar-item>
            <van-tabbar-item replace to="/me">
                <span>{{$t('m.me')}}</span>
                <template #icon="props">
                    <img :src="props.active ? icon4.active : icon4.inactive" />
                </template>
            </van-tabbar-item>
        </van-tabbar>

    </div>
</template>
  
<script>
export default {
    name: 'TabBar',
    data() {
        return {
            active: this.$store.state.active,
            icon1: {
                active: '/home2.png',
                inactive: '/home1.png',
            },
            icon2: {
                active: '/wk2.png',
                inactive: '/wk1.png',
            },
            icon3: {
                active: '/jl2.png',
                inactive: '/jl1.png',
            },
            icon4: {
                active: '/me2.png',
                inactive: '/me1.png',
            },
        };
    },

}
</script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>
  